<loading-state *ngIf="data.isLoading"></loading-state>
<ng-container *ngIf="data.isReady && !data.data.isEmpty">
  <canvas
    baseChart
    [labels]="data.data.labels"
    [datasets]="data.data.datasets"
    [options]="data.data.options"
    [legend]="true"
    [type]="'doughnut'">
  </canvas>

  <div
    style="
      text-transform: uppercase;
      font-size: 12px;
      color: #424242;
      margin-top: 8px;
    ">
    {{ data.data.totalLabel }}: {{ data.data.totalValue | number }}
  </div>
</ng-container>
<empty-state
  *ngIf="data.isReady && data.data.isEmpty"
  [emptyMessage]="data.data.emptyMessage">
</empty-state>
<error-state *ngIf="data.isError" [error]="data.errorOrUndefined"></error-state>
